// todo https://mui.com/material-ui/guides/minimizing-bundle-size/
import { useCallback } from "react";
import { InputAdornment, TextField, Tooltip } from "@mui/material";
import SendIcon from "@/assets/icons/send.svg?jsx";
import StopIcon from "@/assets/icons/stop.svg?jsx";

type MessageInputProps = {
  isAnswering: boolean;
  prompt: string;
  onInput: (prompt: string) => void;
  onConfirmSend: () => void;
  stopAnswering: () => void;
};

export default function MessageInput(props: MessageInputProps) {
  const { isAnswering, prompt, onInput, onConfirmSend, stopAnswering } = props;

  const handleConfirmSend = useCallback(() => {
    if (isAnswering) {
      return;
    }
    onConfirmSend();
  }, [isAnswering, onConfirmSend]);

  return (
    <div className="flex flex-none justify-center py-4">
      <TextField
        className="w-full"
        placeholder="在这里输入问题"
        multiline
        minRows={3}
        maxRows={6}
        variant="standard"
        value={prompt}
        onInput={(e) => onInput((e.target as HTMLInputElement).value)}
        InputProps={{
          disableUnderline: true,
          className: "rounded",
          sx: { padding: "8px", fontSize: "16px" },
          onKeyDown: (e) => {
            if (!e.shiftKey && e.key === "Enter") {
              e.preventDefault();
              handleConfirmSend();
            }
          },
          endAdornment: (
            <InputAdornment position="end">
              {isAnswering ? (
                <Tooltip title="停止生成">
                  <button
                    onClick={stopAnswering}
                    className="!border-none !bg-transparent !text-[#E95513]/80 !outline-none hover:!text-[#E95513]"
                  >
                    <StopIcon height={40} width={40} />
                  </button>
                </Tooltip>
              ) : (
                <Tooltip title="发送">
                  <button
                    onClick={handleConfirmSend}
                    className="!border-none !bg-transparent !text-[#E95513]/80 !outline-none hover:!text-[#E95513]"
                  >
                    <SendIcon />
                  </button>
                </Tooltip>
              )}
            </InputAdornment>
          ),
        }}
      />
    </div>
  );
}
